<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta charset="UTF-8" /> 
  <title>立邦企业社会责任</title> 
  <meta name="description" content="" /> 
  <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport" /> 
  <link rel="stylesheet" href="css/animate1.css" /> 
  <link rel="stylesheet" href="css/viewer.css" /> 
  <link rel="stylesheet" href="css/swiper.min.css" /> 
  <style type="text/css">
  
  </style> 
  <script src="js/jquery-1.11.3.min.js"></script> 
  <script src="js/iscroll.js"></script> 
  <script>
     var myscroll;
     function loaded(){
      window.scrollers = new Array();
      $(".iscrollLocal").each(function(){
        $(this).wrap("<div style='height: 480px;'></div>");
        $(this).css({"height":"auto"});
        $(this).parent()[0].id = new Date().getTime() + Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*100000);
        var _ = $(this).parent()[0].id;
        scrollers[_]= new iScroll(_,{fadeScrollbar:true,hideScrollbar:false});
      });
        //window.myscroll=new iScroll("wrapper");
     }
     window.addEventListener("DOMContentLoaded",loaded,false);
  </script> 
 </head> 
 <body> 
  <!--弹框部分--> 
  <div class="more_list"> 
   <!--立邦承诺弹框--> 
   <div class="more" id="clickme_4_1"> 
    <div class="more_content"> 
     <div class="more_close"> 
      <img src="images/close.png" class="cover" /> 
     </div> 
     <p class="more_content_title">立邦承诺</p> 
     <div class="wrapper"> 
      <div class="iscrollLocal scroller"> 
       <p>立邦涂料中国集团各公司以谋求全集团的共同繁荣为基本理念,通过企业事 业致力于社会公共利益以保护环境、促进社会和谐。立邦通过在市场开发、产品 设计、生产制造、销售及服务各环节创新与合作,实现企业社会责任的提升,建 立良好市场环境与社会经济关系,推动企业可持续发展,确保员工和相关方的职 业健康安全,为立邦与消费者及环境创造一个美好的未来。</p> 
       <p>为此,对于所有的业务活动,特制订以下方针:<br /> • 作为提供有价值涂膜的专业化工企业谋求全球性的发展。<br /> • 遵守法律法规及其他要求,以顾客为导向<br /> • 降低能耗、节约资源。以降低企业生产成本、保护资源和环境为最高指导原则, 从为环境保护与降低能耗做贡献的绿色企业发展为信得过企业。<br /> • 通过基于经营理念的各种事业活动,以与国内外的客户、贸易方、区域社会、 员工、股东等利害关系方之间的信赖关系为基本,以期实现经营构想,并将立邦 的社会责任加以延伸,关注慈善及公益事业,履行作为企业公民的社会责任。<br /> • 整合内部与外部资源,落实企业社会责任的循环目标,分享平台,充分实现互帮 互助效应。<br /> • 在研发减轻环境负担的产品与技术的同时,从产品研发到报废的所有阶段中, 切实考虑环境、安全、健康、关怀等方面的问题,并根据国际动向,实施化学品 的管理,以赢得社会对于企业的信任。<br /> • 通过提供色彩丰富、品质稳定的产品和优质的服务,不断增强顾客满意,为持续 发展立邦事业、保护生存环境而努力。<br /> • 提供具有竞争性的薪酬与成长计划;创造良好的工作环境与安全保护;增进各部 门团队合作;关爱员工、合作油漆工等利益相关方的家人;密切与工会的合作与 互助。<br /> • 以人为本,全员参与,促进沟通与理解,实施自主管理。 </p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!--为爱上色弹框--> 
   <div class="more" id="clickme_6_1"> 
    <div class="more_content"> 
     <div class="more_close"> 
      <img src="images/close.png" class="cover" /> 
     </div> 
     <p class="more_content_title">用爱，为希望上色</p> 
     <div class="wrapper"> 
      <div class="iscrollLocal scroller"> 
       <p>世界上第一颗灯泡,第一辆汽车,第一架飞机,甚至第一部电脑...... 再伟大的创造,都来自最微小的想像;立邦相信,只有拥有一个快乐而又充满色彩的童年,才能够拥有创造出伟大发明的想象力。</p> 
       <p>2009 年,立邦「为爱上色」计划迈出第一步,持续为中国偏远地区的学童美化、修复和改善校园学习环境;同时,更与中国青少年发展基金会、上海联劝公益基金会成立为爱上色专项基金,捐建立邦快乐美术教室、发起乡村美术老师培训、美院大学生支教等美术教育支持行动。</p> 
       <p>我们为儿童的想像力,注入缤纷色彩,建立良好环境,带来专业的美术教育,致力于为孩子们创造快乐的童年,培育未来伟大的梦想家。</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!--1+3弹框     --> 
   <div class="more" id="clickme_7_1"> 
    <div class="more_content"> 
     <div class="more_close"> 
      <img src="images/close.png" class="cover" /> 
     </div> 
     <p class="more_content_title">安全是立邦日常的基础</p> 
     <div class="wrapper"> 
      <div class="iscrollLocal scroller"> 
       <p>立邦相信所有的日常工作都必须&quot;安全第一&quot;。安全是立邦的日常运营基础。除了立邦员工，我们更以立邦为主体，拉动整条供应链上的企业，甚至是整个行业对质量、健康、安全、环境都尽到最大的责任，土壤、空气、水质甚至行走的人们，一定能够感受到改变。</p> 
       <p>以立邦公司为&quot;1&quot;，自上而下从立邦的管理团队到所有员工，携手行业内上下游企业为&quot;3&quot;，包含供应商、物流商与客户，搭建全供应链质量、健康、安全、环境(QHSE)的专业队伍。不但将安全责任逐级分解落实到全员，同时建立与相关方共赢安全的概念，向先进的上下游供应链上的企业学习，把立邦的安全、企业社会责任(CSR) 理念传递给相关方，带领供应链上的企业持续改善，共同实现在环保、安全与健康领域现状的社会责任承诺。</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!-- 员工关怀弹框    --> 
   <div class="more" id="clickme_8_1"> 
    <div class="more_content"> 
     <div class="more_close"> 
      <img src="images/close.png" class="cover" /> 
     </div> 
     <p class="more_content_title">以人为本，共创精彩</p> 
     <div class="wrapper"> 
      <div class="iscrollLocal scroller"> 
       <p>立邦相信，每一位员工都是立邦创造不同精彩背后最为重要的财富与支持者。员工参与可以让员工成为企业的代言人。&quot;我们的核心企业资产每天晚上都会走出办公室，我们有责任确保这些资产，第二天都能身心充满活动力地重返办公室。&quot; 不论在哪个岗位上，每一位员工都是立邦创造不同精彩背后最为重要的财富与支持者。立邦坚信，给员工提供最适切的关怀和照顾，提升员工积极性、满意度、敬业度和职业忠诚度，进而享受在职业舞台上的挑战并收获成就，是立邦对每一位员工应尽的责任。立邦持续从成长关怀、学习关怀、福利关怀、健康关怀和作息关怀五个方面开展员工关怀活动，关心员工的成长。通过绩效要素测评，立邦员工满意度稳中有进，员工主动离职率下降，立邦员工关怀计划也得到了员工的广泛认可。</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!-- 绿色行动弹框    --> 
   <div class="more" id="clickme_9_1"> 
    <div class="more_content"> 
     <div class="more_close"> 
      <img src="images/close.png" class="cover" /> 
     </div> 
     <p class="more_content_title">从各环节实现环保，绿色行动是我们的日常生活实践。</p> 
     <div class="wrapper"> 
      <div class="iscrollLocal scroller"> 
       <p>立邦绿色行动，从绿色研发、绿色采购、绿色生产和绿色推广全面打造可持续发展的绿色平台。一直以来，立邦关注绿色环保，坚持在节能降耗上的投入及研发；凭借行业内首屈一指的先进技术，不断开发环境友善的产品；在采购过程对供应商坚持严格的评估管理；在生产环节做到减少浪费、提高效益，全面实行绿色理念；借由绿色推广活动，将立邦的绿色理念传递给每一个与立邦相关的利益关系人。</p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!--社区关怀弹框    --> 
   <div class="more" id="clickme_10_1"> 
    <div class="more_content"> 
     <div class="more_close"> 
      <img src="images/close.png" class="cover" /> 
     </div> 
     <p class="more_content_title">与员工一起关注身边的公益身体力行带去爱与温暖</p> 
     <div class="wrapper"> 
      <div class="iscrollLocal scroller"> 
       <p>一年365 天之间，立邦员工志愿者为了爱，走出来关怀身边需要帮助的人群。属于立邦人的爱与温暖，开始在中国各地温暖不同的人群。</p> 
       <p>社区关怀是立邦企业社会责任三大循环之一责任循环中另一重要项目，主要是以立邦的工厂及办事处为据点，关怀扶助生活在周遭的弱势群体，比如低收入老人家庭、残疾人群、贫困学生，或是重大灾害急难援助等。自立邦启动「为爱刷新」社区关怀活动以来，持续在全国各大城市，推动社区关怀项目，来自立邦中国的各事业部数以千计的员工志愿者参与其中，身体力行地为身边的弱势群体带去温暖与帮助，用实际行动传达自己的公益理念。</p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <!--end of 弹框部分--> 
  <!-- Swiper --> 
  <div class="swiper-container" style="display:block;"> 
   <div class="swiper-wrapper"> 
    <!--      首页--> 
    <div class="swiper-slide" id="one" style="display:none;"> 
     <div class="page pt-page-rotateRoomTopIn" id="page_1" style="left:0px; top: 0px; width:640px; height: 1036px; display:block;"> 
      <div class="pagebg" style="overflow: hidden; "> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px; opacity: 1;" src="images/5559b38ec38ef.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 227px 868.5px 0px; transform: rotate(0deg);"> 
        <div class="element fadeIn" id="auto_gen_1" style="  top: 885px; left: 0px; width: 640px; height: 264px; -webkit-animation-duration: 1s;   opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/559bac1c0597d.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--我们的责任 --> 
    <div class="swiper-slide"> 
     <div class="page active" style="display:block; overflow: hidden; left: 0px; top: 0px; width: 640px; height: 1036px;"> 
      <div class="pagebg" style="overflow: hidden; top:20px;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/1.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; top:0px;"> 
        <div class="element slideInDown" style="top: 0px; left: 0px; width: 640px; height: 138px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/2.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInUp" style="  top: 548px; left: 0px; width: 640px; height: 510px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/3.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element fadeIn clickme" id="clickme_1" style="z-index: 0; top: 250px; left: 0px; width: 640px; height: 255px; -webkit-animation-duration: 1s; opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/4.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- csr概要     --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden;"> 
       <img style="position: absolute; top: 0px; left: 0px; width:640px; height: 1036px;  opacity: 1;" src="images/1.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInDown" style="top: 0px; left: 0px; width: 640px; height: 132px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/5.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInUp" style="top: 518px; left: 2px; width: 640px; height: 516px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/6.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element fadeIn clickme" id="clickme_2" style="top: 257px; left: 0px; width: 640px; height: 235px; opacity:0;  -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/7.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--csr委员会--> 
    <div class="swiper-slide"> 
     <div class="page" id="page_3" style="display:block; overflow: hidden; left: 0px; top: 0px; width: 640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/1.jpg" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInDown" style="top: 0px; left: 0px; width: 640px; height: 137px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/8.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element fadeIn clickme" id="clickme_3" style="top: 260px; left: 0px; width: 640px; height: 237px; opacity:0; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/10.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInUp" style="top: 532px; left: -4px; width: 640px; height: 501px; -webkit-animation-duration: 1s; "> 
         <img style="position:absolute;top:0px;left:0px" src="images/9.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 立邦承诺--> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left: 0px; top: 0px; width: 640px; height: 1036px;"> 
      <div class="pagebg" style="overflow: hidden;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/11.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInLeft" style="top: 0px; left: 0px; width: 640px; height: 1008px; -webkit-animation-duration: 1.5s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/13.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInRight clickme" id="clickme_4" style="top: 219px; left: 2px; width: 640px; height: 541px; -webkit-animation-duration: 1.5s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/12.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--我们的行动     --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden; background: white;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/1.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInDown" style="top: 0px; left: 0px; width: 640px; height: 132px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/14.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInUp" style="top: 533px; left: 3px; width: 640px; height: 503px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/15.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element fadeIn clickme" style="top: 273px; left: 1px; width: 640px; height: 219px; -webkit-animation-duration: 1s;  opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/16.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--  为爱上色    --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/17.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 320px 109px 0px; transform: rotate(0deg);"> 
        <div class="element slideInRight" id="auto_gen_31" style="  top: -18px; left: 0px; width: 640px; height: 132px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/19.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 316px 772px 0px; transform: rotate(0deg);"> 
        <div class="element slideInLeft" id="auto_gen_32" style="  top: 592px; left: -4px; width: 640px; height: 444px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute; top:0px;left:0px" src="images/18.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 320px 386px 0px; transform: rotate(0deg);"> 
        <div class="element fadeIn clickme" id="clickme_6" style="  top: 244px; left: 0px; width: 640px; height: 330px; -webkit-animation-duration: 1s;   opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/20.png" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--  1+3计划    --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden;  background: white;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/21.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInLeft" style="  top: 0px; left: 0px; width: 640px; height: 254px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/22.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInRight" id="auto_gen_32" style="top: 626px; left: -4px; width: 640px; height: 452px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/23.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element fadeIn clickme" id="clickme_7" style="top: 286px; left: 0px; width: 640px; height: 263px; -webkit-animation-duration: 1s; opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/24.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--  员工关怀    --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden; background: white;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/25.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInRight" style="top: 0px; left: 0px; width: 640px; height: 138px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/26.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInLeft" style="top: 583px; left: -4px; width: 640px; height: 449px; -webkit-animation-duration: 1s; "> 
         <img style="position:absolute; top:0px;left:0px" src="images/27.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1; "> 
        <div class="element fadeIn clickme" id="clickme_8" style="top: 270px; left: 0px; width: 640px; height: 292px; -webkit-animation-duration: 1s; opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/28.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 绿色行动    --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden; background: white;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/32.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 320px 109px 0px; transform: rotate(0deg);"> 
        <div class="element slideInLeft" id="auto_gen_31" style="  top: 0px; left: 0px; width: 640px; height: 132px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/31.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 316px 772px 0px; transform: rotate(0deg);"> 
        <div class="element slideInRight" id="auto_gen_32" style="  top: 552px; left: 0px; width: 640px; height: 498px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute; top:0px;left:0px" src="images/30.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; transform-origin: 320px 386px 0px; transform: rotate(0deg);"> 
        <div class="element fadeIn clickme" id="clickme_9" style="  top: 245px; left: 0px; width: 640px; height: 271px; -webkit-animation-duration: 1s;   opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/29.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--  社区关怀    --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden;  background: white;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px;  opacity: 1;" src="images/33.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInRight" style="top: 0px; left: 0px; width: 640px; height: 132px; -webkit-animation-duration: 1s;"> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/34.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInLeft" id="auto_gen_32" style="top: 590px; left: 0px; width: 640px; height: 444px; -webkit-animation-duration: 1s; "> 
         <img style="position:absolute; top:0px;left:0px" src="images/35.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1; "> 
        <div class="element fadeIn clickme" id="clickme_10" style="top: 240px; left: 0px; width: 640px; height: 321px; -webkit-animation-duration: 1s; opacity:0;"> 
         <img style="position:absolute; top:0px;left:0px" src="images/36.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- 封底    --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left:0px; top:0px; width:640px; height:1036px;"> 
      <div class="pagebg" style="overflow: hidden;"> 
       <img style="position: absolute; top: 0px; left: 0px; width: 640px; height: 1036px; opacity: 1;" src="images/39.jpg" class="cover" /> 
      </div> 
      <div class="pagecontent"> 
       <div class="elementout" style="height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInLeft" style="top: 249px; left: 0px; width: 640px; height: 229px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute;width:640px;top:0px;left:0px" src="images/37.png" class="cover" /> 
        </div> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
        <div class="element slideInRight" style="top: 469px; left: -4px; width: 640px; height: 104px; -webkit-animation-duration: 1s;  "> 
         <img style="position:absolute; top:0px;left:0px" src="images/38.png" class="cover" /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--    封底页面       --> 
    <div class="swiper-slide"> 
     <div class="page" style="display:block; overflow: hidden; left: 0px; top: 0px; width: 640px; height: 0px;"> 
      <div class="pagecontent"> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
       </div> 
       <div class="elementout" style="z-index: 0; height: 0px; width: 0px; position: relative; opacity: 1;"> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- end of 封底页面       --> 
   </div> 
   <!--   end swiper-wrapper--> 
  </div> 
  <!--   end swiper-container--> 
  <!--音乐播放 --> 
  <div style="z-index: 999; width: 44px; height: 44px; position: absolute; top: 3%; left: 88%; cursor: pointer;" id="mplay"> 
   <audio autoplay="autoplay" loop="loop" id="audio" src="CSR.mp3"> 
   </audio> 
  </div> 
  <img id="arrow" class="cover" src="images/arrow_page.png" style="z-index:999;width:40px;position:absolute;bottom:30px;left:50%;margin-left:-20px;" /> 
  <!--loading图片--> 
  <div id="preloadarea" style="border: 0px; z-index: 999; width: 640px; height: 1100px; position: absolute; left: 0px; top: 0px; display:block; background: white;"> 
   <div style="position:absolute;background:rgba(30,30,30,0);top:40%;width:160px;height:160px;left:50%;margin-left:-80px;overflow:hidden;"> 
    <div id="cover" style="width:160px;height:160px;background-size:100%;text-align:center;"> 
     <img src="images/loading.gif" style="width:105px;height:105px;" /> 
     <br /> 
     <img src="images/loading_text.gif" style="width:120px;margin-left:18px;" /> 
    </div> 
   </div> 
  </div> 
  <script type="text/javascript" src="js/swiper.min.js"></script> 
  <script type="text/javascript">
//点击查看更多，出现弹框
   $(".clickme").click(function(){
       var clickme_id = $(this).attr("id");
       $(".more").hide();        
       $("#"+clickme_id+"_1").fadeIn();
       setTimeout(function(){
        var id = $("#"+clickme_id+"_1 .iscrollLocal").parent()[0].id;
        scrollers[id].refresh();
      }, 1000);
   });
      $(".more_close").click(function(){
        $(".more").hide();
      }
      );

//音乐按钮控制
      var sj_music = true;
      var music = document.getElementById("audio");
      $("#mplay").click(function(){
          if(sj_music){
            $(this).css("background-image","url(images/musicoff.png)");
            music.pause();
            sj_music = false;
          }else{
            $(this).css("background","url(images/musicon.png)");
            music.play();
            sj_music = true;
          }          
      });
//swiper插件实现上下滑动
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
      });
     
  </script> 
  <script type="text/javascript">
        $(window).load(function(){
            //loading效果
            setTimeout(function(){
                $("#preloadarea").hide();
                $(".swiper-container").show();
                $(".more_list").show();
                $("#one").show();
            },4000);
        });
     </script>  
 </body>
</html>